<!--
 * @Date: 2022-08-25 14:05:59
 * * @LastEditors: StavinLi 495727881@qq.com
 * @LastEditTime: 2023-03-15 14:52:34
 * @FilePath: /Workflow-Vue3/src/components/drawer/copyerDrawer.vue
-->
<template>
  <!-- 知会人 -->
  <el-drawer
    :append-to-body="true"
    title="节点属性"
    v-model="visible"
    custom-class="set_copyer set_promoter"
    :show-close="true"
    :size="550"
    :before-close="saveCopyer"
  >
    <div class="demo-drawer__content">
      <div class="copyer_content drawer_content">
        <el-form :model="conForm" label-width="87px">
          <el-form-item label="条件描述：">
            <el-input v-model="conForm.name" /> </el-form-item
        ></el-form>
        <div class="flex">
          <span class="alink">设置审批人</span>
          <el-popover
            placement="bottom"
            width="300"
            trigger="hover"
            effect="dark"
          >
          </el-popover>
        </div>
        <div class="tabline"></div>
        <el-button type="primary" @click="addCopyer">添加人员</el-button>
        <p class="selected_list">
          <span v-for="(item, index) in copyerConfig.nodeUserList" :key="index"
            >{{ item.name }}
            <img
              src="../../assets/images/add-close1.png"
              @click="
                $func.removeEle(copyerConfig.nodeUserList, item, 'targetId')
              "
            />
          </span>
          <a
            v-if="
              copyerConfig.nodeUserList && copyerConfig.nodeUserList.length != 0
            "
            @click="copyerConfig.nodeUserList = []"
            >清除</a
          >
        </p>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCopyer">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
      <employees-role-dialog
        v-model:visible="copyerVisible"
        v-model:data="checkedList"
        @change="sureCopyer"
      />
    </div>
  </el-drawer>
</template>
<script setup>
import employeesRoleDialog from "../dialog/employeesRoleDialog.vue";
import $func from "../../plugins/preload";
import { mapState, mapMutations } from "../../plugins/lib.js";
import { storeToRefs } from "pinia";
import { ref, reactive, watch, computed } from "vue";
import { workFlowStoreHook } from "@/store/modules/workflow";

let copyerConfig = ref({});
let ccSelfSelectFlag = ref([]);
let copyerVisible = ref(false);
let checkedList = ref([]);
let conForm = reactive({});
// let { copyerDrawer, copyerConfig1 } = mapState();
let { copyerDrawer, copyerConfig1 } = storeToRefs(workFlowStoreHook());
let visible = computed({
  get() {
    return copyerDrawer.value;
  },
  set() {
    closeDrawer();
  }
});
// let { setCopyerConfig, setCopyer } = mapMutations();
watch(copyerConfig1, val => {
  copyerConfig.value = val.value;
  ccSelfSelectFlag.value =
    copyerConfig.value.ccSelfSelectFlag == 0
      ? []
      : [copyerConfig.value.ccSelfSelectFlag];
});

const addCopyer = () => {
  copyerVisible.value = true;
  checkedList.value = copyerConfig.value.nodeUserList;
};
const sureCopyer = data => {
  copyerConfig.value.nodeUserList = data;
  copyerVisible.value = false;
};
const saveCopyer = () => {
  copyerConfig.value.ccSelfSelectFlag =
    ccSelfSelectFlag.value.length == 0 ? 0 : 1;
  copyerConfig.value.error = !$func.copyerStr(copyerConfig.value);
  workFlowStoreHook().setCopyerConfig({
    value: copyerConfig.value,
    flag: true,
    id: copyerConfig1.value.id
  });
  closeDrawer();
};
const closeDrawer = () => {
  workFlowStoreHook().setCopyer(false);
};
</script>

<style lang="scss" scoped>
.set_copyer {
  .copyer_content {
    padding: 20px 20px 0;

    .el-button {
      margin-bottom: 20px;
    }

    .el-checkbox {
      margin-bottom: 20px;
    }
  }
  .flex {
    display: flex;
  }
  .alink {
    color: #5086fc;
  }
  .tabline {
    width: 62px;
    height: 4px;
    background: #5086fc;
    border-radius: 3px;
    margin: 4px 0 0 3px;
    margin-bottom: 15px;
  }
  .center {
    text-align: center;
  }
}
</style>
